<template>
  <div class="appointmentdetail-content">
    <!-- <back-bar title="预约详情" @toBack="toBack" /> -->
    <div class="header-box">
      <p>待房东确认</p>
      <p>您提交了预约看房申请,带房东回应</p>
      <div class="headerInfo-box">
        <div class="header-img-box">
          <div class="header-img">
            <img src="~assets/img/headImg/defaultHead.jpg" />
          </div>
          <p>先生</p>
        </div>
        <div class="time-box">
          <span>预约</span>
          <span>{{lookHouseTime}}</span>
          <span>看房</span>
        </div>
      </div>
    </div>
    <div class="houseItemDetail-box">
      <house-item :houseItem="houseItem" :imgPath="imgPath" @click.native="toHouseDetail" />
      <p>
        邀请时间:
        <span>{{createTime}}</span>
      </p>
    </div>
    <div class="canleAppoint-box" @click="tocancelLookHouse">取消</div>
    <div class="back-box" @click="back">
      <van-icon name="arrow-left" />
    </div>
  </div>
</template>

<script>
import HouseItem from "components/common/houseitem/HouseItem";

import {
  getAppointmentDetail,
  cancleAppointment,
} from "network/appointmentHouse";

export default {
  name: "",
  components: {
    HouseItem,
  },
  data() {
    return {
      houseItem: {},
      imgPath: "",
      lookHouseTime: "",
      createTime: "",
      houseId: "",
      staticpath: localStorage.getItem("staticpath"),
    };
  },
  methods: {
    toBack() {
      this.$router.back();
    },
  },
  created() {
    let orderId = this.$route.query.orderId;
    getAppointmentDetail(orderId).then((res) => {
      console.log(res);
      this.houseItem = res.data.house;
      this.imgPath = staticpath + res.data.house.images[0].path;
      this.lookHouseTime = res.data.lookHouseTime;
      this.createTime = res.data.createTime;
      this.houseId = res.data.houseId;
    });
  },
  methods: {
    tocancelLookHouse() {
      let orderId = this.$route.query.orderId;
      cancleAppointment({ orderId }).then((res) => {
        if (res.code == 200) {
          this.$toast({
            message: "取消成功",
            position: "bottom",
          });
          this.$router.push("/myappointment/pending");
        }
      });
    },
    back() {
      this.$router.back();
    },
    toHouseDetail() {
      let houseId = this.houseId;
      this.$router.push("/housedetail?houseId=" + houseId);
    },
  },
};
</script>

<style scoped>
.appointmentdetail-content {
  position: relative;
}
.header-box {
  height: 130px;
  background-color: #ff5654;
}
.header-box > p {
  color: #fff;
  margin-bottom: 8px;
  margin-left: 30px;
}
.header-box p:nth-child(1) {
  padding-top: 30px;
}
.header-box p:nth-child(2) {
  font-size: 12px;
}
.headerInfo-box {
  display: flex;
  flex-direction: column;
  line-height: 30px;
  height: 80px;
  width: 300px;
  background-color: #fff;
  margin: 0 auto;
  margin-top: 20px;
  box-shadow: 0 2px 2px rgba(100, 100, 100, 0.2);
  border-radius: 3px;
  padding: 10px;
}
.headerInfo-box > div {
  flex: 1;
}
.headerInfo-box > div:nth-child(1) {
  border-bottom: 1px solid #eee;
}
.header-img {
  height: 25px;
  width: 25px;
  border-radius: 25px;
  overflow: hidden;
  margin-right: 10px;
}
.header-img img {
  height: 25px;
  width: 25px;
}
.header-img-box {
  display: flex;
}
.time-box {
  margin-top: 5px;
}
.time-box span {
  margin-right: 5px;
}
.time-box span:nth-child(2) {
  color: #ff5654;
}
.houseItemDetail-box {
  margin-top: 70px;
}
.houseItemDetail-box > p {
  font-size: 13px;
  margin-top: 20px;
  margin-left: 15px;
}
.canleAppoint-box {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 50px;
  text-align: center;
  height: 50px;
  background-color: #ff5654;
  font-size: 18px;
  color: #fff;
}
.back-box {
  position: absolute;
  top: 8px;
  left: 3px;
  right: 0;
  font-size: 25px;
  color: #fff;
}
</style>